{% extends "base.html" %}{% load static %}
{% block title %}不同类别下价格区间数量占比{% endblock %}
{% block style %}
<style>
    html, body {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        min-height: 100vh;
    }

    #wrapper {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: calc(100vh - 116px) !important;
    }

    .chart-container {
        width: 100%;
        max-width: 1200px;
        background: rgba(26, 26, 26, 0.8);
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
        backdrop-filter: blur(10px);
        margin: 2rem auto;
        color: #fff;
    }

    .category-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1rem;
    }

    .category {
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
        color: #fff;
        background: rgba(0, 191, 255, 0.1);
        border-radius: 20px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 191, 255, 0.2);
        text-decoration: none;
    }

    .category:hover {
        background: rgba(0, 191, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
        color: #fff;
        text-decoration: none;
    }

    #chart {
        height: 600px;
        margin-top: 2rem;
    }

    .neon-text {
        color: #00bfff;
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="chart-container">
        <h2 class="neon-text">价格区间数量统计</h2>
        <div class="category-nav">
            <a href="{% url 'system:chart1' %}" class="category">
                刷新
            </a>
            {% for item in categories %}
                <a href="{% url 'system:chart1' %}?category={{ item.category }}" class="category">
                    {{ item.category }}
                </a>
            {% endfor %}
        </div>
        {% if category %}
            <div id="chart"></div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block script %}
<script>
    var data = {{ data|safe }};
    var Chart = echarts.init(document.getElementById('chart'));
    var option = {
        title: {
            text: '',
            left: 'left',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            right: 'right',
            textStyle: {
                color: '#fff'
            },
            itemStyle: {
                borderColor: '#fff'
            },
            inactiveColor: 'rgba(255, 255, 255, 0.3)'
        },
        xAxis: {
            name: '价格区间',
            type: 'category',
            data: data.x_data,
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            }
        },
        yAxis: {
            name: '数量',
            type: 'value',
            max: Math.max(...data.y_data) + 20,
            axisLabel: {
                color: '#fff'
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                }
            }
        },
        series: [{
            name: '数量',
            type: 'bar',
            data: data.y_data,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#00bfff'},
                        {offset: 0.5, color: '#0080ff'},
                        {offset: 1, color: '#0040ff'}
                    ]
                ),
                borderRadius: [5, 5, 0, 0]
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#00ffff'},
                            {offset: 0.7, color: '#00bfff'},
                            {offset: 1, color: '#0080ff'}
                        ]
                    )
                }
            },
            markPoint: {
                symbolSize: 100,
                label: {
                    show: true,
                    color: '#fff',
                    formatter: function (param) {
                        return param.name;
                    }
                },
                data: [
                    {name: '最小值', type: 'min'},
                    {name: '最大值', type: 'max'}
                ]
            }
        }]
    };

    Chart.setOption(option);
</script>
{% endblock %}